<template>
  <div id="swiper">
    <div class="block">
      <el-carousel trigger="click" :how-pagination="false" height="100%" :interval="40000">
        <el-carousel-item v-for="(item,index) of list" :key="index">
          <!-- <el-carousel-item v-for="item in 1" :key="item"> -->
          <div class="container">
            <div class="kuang" v-for="(itm,index) of item" :key="index">
              <div class="iframe">
                <object
                  classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
                  codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab"
                  id="vlc"
                  name="vlc"
                  class="vlcPlayer"
                  events="True"
                >
                  <param name="Src" :value="itm.url" />
                  <param name="ShowDisplay" value="True" />
                  <param name="AutoLoop" value="False" />
                  <param name="AutoPlay" value="True" />
                  <embed id="vlcEmb"  type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480"
                  :target="itm.url" ></embed>
                </object>
              </div>
              <div class="detail">
                <!-- <div class="top">
                      <ul>
                        <li class="normal">
                          <div>正常</div>
                          <div class="normalBgActive"></div>
                        </li>
                        <li class="wraning">
                          <div>警告</div>
                          <div class="wranBgActive"></div>
                        </li>
                        <li class="danger">
                          <div>危险</div>
                          <div class="dangerBgActive"></div>
                        </li>
                      </ul>
                    </div>
                    <div class="middle">
                      <ul>
                        <li class="riverActive">茭渎村河</li>
                        <li>新和北河</li>
                        <li>车双河</li>
                      </ul>
                      <ul>
                          <li>
                            <span>风力预警</span>
                            <span class="normalActive">4级</span>
                          </li>
                          <li>
                            <span>水位预警</span>
                            <span class="normalActive">6级</span>
                          </li>
                          <li>
                            <span>雨量预警</span>
                            <span class="normalActive">7级</span>
                          </li>
                        </ul>
                </div>-->
                <div class="new">
                  <ul>
                    <li>
                      <span>监控名称:</span>
                      <span>{{itm.name}}</span>
                    </li>
                    <li>
                      <span>监控型号:</span>
                      <span>{{itm.brand}}</span>
                    </li>
                    <li>
                      <span>监控地址:</span>
                      <span>{{itm.adds}}</span>
                    </li>
                  </ul>
                </div>
                <div class="bottom">
                  <span>巡查情况</span>
                  <span class="normalActive">正常</span>
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "swiper",
  data() {
    return {
      list: [[], [], []],
      // list:[],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      var that = this;
      axios.get("index.php?g=api&m=index&a=getCamera").then(function (res) {
        var data = res.data.content;
        that.list[0].push(data[0]);
        that.list[0].push(data[1]);
        that.list[1].push(data[2]);
        that.list[1].push(data[3]);
        that.list[2].push(data[4]);
        that.list[2].push(data[5]);
      });
    },
  },
  filters: {
    changedate(val) {
      return val.split(" ")[0];
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#swiper {
  width: 100%;
  height: 14.7vh;
}
.block {
  height: 100%;
}
.el-carousel,
.el-carousel__container {
  height: 100% !important;
}
.el-carousel__item .container {
  height: 100%;
  display: flex;
  justify-content: space-around;
}
.container {
  height: 100%;
  display: flex;
  justify-content: space-around;
}
.container .kuang {
  width: 24vw;
  height: 14.7vh;
  display: flex;
  background-image: url(https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow/img/jiankong.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.container .kuang .iframe {
  width: 12vw;
  height: 13.4vh;
  margin-top: 0.6vh;
  margin-left: 0.4vw;
}
.container .kuang .detail {
  width: 12.7vw;
  height: 13.3vh;
}
.container .kuang .detail .top ul {
  display: flex;
  justify-content: flex-end;
  color: #fff;
  font-size: 0.12rem;
}
.container .kuang .detail .top ul li {
  margin-left: 0.2vw;
}
.container .kuang .detail .top ul li div:last-child {
  width: 100%;
  height: 1.85vh;
}
.container .kuang .detail .middle {
  display: flex;
  justify-content: flex-start;
}
.container .kuang .detail .middle ul:first-child {
  padding-left: 2.3vw;
}
.container .kuang .detail .middle ul:first-child li {
  background-color: #60d8f6;
  width: 260px;
  height: 70px;
  margin-bottom: 60px;
  text-align: center;
  font-size: 40px;
  line-height: 70px;
  border-radius: 10px;
}
.container .kuang .detail .middle ul:last-child li {
  color: #fff;
  font-size: 50px;
  line-height: 130px;
  padding-left: 150px;
}
.container .kuang .detail .middle ul:last-child li span:last-child {
  padding-left: 100px;
}
.container .kuang .detail .bottom {
  color: #fff;
  font-size: 10px;
  text-align: center;
  padding-top: 0.5vh;
}
.container .kuang .detail .bottom span:last-child {
  margin-left: 0.5vw;
}
embed {
  width: 100%;
  height: 100%;
}
.container .kuang .detail .middle ul:first-child li.riverActive {
  background-color: #4397e9;
}
.normalBgActive {
  background-color: #42f063;
}
.wranBgActive {
  background-color: #edf178;
}
.dangerBgActive {
  background-color: #fa1d1d;
}
.normalActive {
  color: #42f063;
}
.wranActive {
  color: #edf178;
}
.dangerActive {
  color: #fa1d1d;
}
.new {
  color: #fff;
  font-size: 0.15rem;
  padding: 0.9vh 0.52vw;
}
.new li {
  line-height: 3vh;
}
.new li:nth-child(2) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>